<template>
  <div style="height: 100%; width: 100%; position: relative; overflow: hidden">
      <div class="page-top" style="border: 1px solid #ccc">
          <div style="min-width: 885px">
              <div>
                  <table style="white-space: nowrap">
                      <tr>
                          <td>入库日期</td>
                          <td>
                              <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" style="width: 130px" v-model="searchObj.startdt" key="1"></el-date-picker>
                          </td>
                          <td>至</td>
                          <td>
                              <el-date-picker type="date" value-format="yyyy-MM-dd HH:mm:ss" :clearable="false" style="width: 130px" v-model="searchObj.enddt" key="2"></el-date-picker>
                          </td>
                          <td>样&nbsp;本&nbsp;号</td>
                          <td>
                              <el-input v-model="searchObj.sampleno1" @keyup.enter.native="InitPage" clearable style="width: 120px" placeholder=""></el-input>
                              ~
                              <el-input v-model="searchObj.sampleno2" @keyup.enter.native="InitPage" clearable style="width: 120px" placeholder=""></el-input>
                          </td>
                          <td>检验组</td>
                          <td>
                              <rm-ddl-common datatype="labgroup" dataname="检验组" v-model="searchObj.labgroupid" width="130px" @change="labgroupidChange"></rm-ddl-common>
                          </td>
                          <td>报告状态</td>
                          <td>
                              <el-select v-model="searchObj.rptstatus" style="width: 130px" :clearable="true">
                                  <el-option v-for="(item, index) in rptstatusOption" :label="item.label" :value="item.value" :key="index"></el-option>
                              </el-select>
                          </td>
                          <td></td>
                      </tr>
                      <tr>
                          <td>条&nbsp;形&nbsp;码</td>
                          <td colspan="3">
                              <el-input v-model="searchObj.barcode" @keyup.enter.native="InitPage" clearable style="width: 100%" placeholder="输入条码号"></el-input>
                          </td>
                          <td>库&nbsp;位&nbsp;号</td>
                          <td>
                              <el-select v-model="searchObj.libheader" style="width: 90px" :clearable="true">
                                  <el-option v-for="(item, index) in libnoheadsOption" :label="item.label" :value="item.value" :key="index"></el-option>
                              </el-select>

                              <el-input v-model="searchObj.libno1" @keyup.enter.native="InitPage" clearable style="width: 75px" placeholder=""></el-input>
                              ~
                              <el-input v-model="searchObj.libno2" @keyup.enter.native="InitPage" clearable style="width: 75px" placeholder=""></el-input>
                          </td>
                          <td>姓&nbsp;名</td>
                          <td>
                              <el-input v-model="searchObj.patname" @keyup.enter.native="InitPage" clearable style="width: 130px" placeholder=""></el-input>
                          </td>
                          <td></td>
                          <td></td>
                      </tr>
                      <tr>
                          <td>申请项目</td>
                          <td colspan="3">
                              <el-input v-model="searchObj.reqitemcodes" @keyup.enter.native="InitPage" clearable style="width: 100%" placeholder="双击选择申请项目或输入项目代码" @dblclick.native="dialogreqitem = true"></el-input>
                          </td>
                          <td>项目组合</td>
                          <td>
                              <!-- <el-input v-model="searchObj.reqitemgroup" @keyup.enter.native="InitPage" clearable style="width:100%" placeholder=""></el-input> -->
                              <rm-ddl-common datatype="reportitemcomb" dataname="报告项目组合" v-model="searchObj.repitemgroup" width="100%" @change="repitemgroupChange"></rm-ddl-common>
                          </td>
                          <td>病历号</td>
                          <td>
                              <el-input v-model="searchObj.patno" @keyup.enter.native="InitPage" clearable style="width: 130px" placeholder=""></el-input>
                          </td>
                          <td colspan="3">
                              <el-radio-group style="padding-left: 5px" v-model="searchObj.status" @change="InitPage">
                                  <el-radio :label="0">全部</el-radio>
                                  <el-radio :label="1">在库</el-radio>
                                  <el-radio :label="9">遗弃</el-radio>
                              </el-radio-group>
                          </td>
                      </tr>
                  </table>
                  <div class="top-deal">
                      <el-button icon="el-icon-search" type="primary" @click="InitPage" v-has="'PINQUERY'">查询</el-button>
                      <el-button icon="el-icon-close" @click="btnClear">清除</el-button>
                      <!-- <el-button @click="printBtn(1)">清单打印</el-button>
                      <el-button @click="printBtn(2)">清单设计</el-button> -->
                      <el-button icon="el-icon-download" @click="exportExcel">导出</el-button>
                      <el-button @click="btnCancelInLib">撤销入库</el-button>
                      <el-button @click="btnAbandon" icon="el-icon-close">遗弃</el-button>
                  </div>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <div style="height: 100%">
              <rm-layout-right splitcolor="white" movingcolor="#00ffff" :splitwidth="5" :fixsize="400">
                  <template v-slot:fix>
                      <div style="height: 100%">
                          <vxe-table show-overflow ref="rxTable" :data.sync="RightList" height="auto" :loading="RightLoading" :sort-config="{ trigger: 'cell' }" :keyboard-local-config="keyLocalConfig" border size="mini" show-header-overflow highlight-current-row resizable stripe header-align="center" show-footer :row-class-name="RptItemRowName">
                              <vxe-table-column field="rpt_itemname" title="报告项目名称" width="170" sortable></vxe-table-column>
                              <vxe-table-column field="rpt_itemcode" title="项目代码" width="80" sortable></vxe-table-column>
                              <vxe-table-column field="sampleno" title="样本号" width="70" align="center" sortable></vxe-table-column>
                              <vxe-table-column field="reportid" title="报告ID" width="120" sortable></vxe-table-column>
                              <vxe-table-column field="result_str" title="检验结果" width="80" align="center" sortable></vxe-table-column>
                              <vxe-table-column field="sampledate" title="标本日期" width="120" sortable></vxe-table-column>
                              <vxe-table-column field="rptunitname" title="报告单元" width="80" align="center" sortable></vxe-table-column>
                          </vxe-table>
                      </div>
                  </template>

                  <div style="height: 100%; width: 100%">
                      <vxe-table show-overflow ref="lxTable" :data.sync="LeftList" height="auto" :loading="LeftLoading" :sort-config="{ trigger: 'cell' }" :keyboard-local-config="keyLocalConfig" border size="mini" show-header-overflow highlight-current-row resizable stripe header-align="center" show-footer @current-change="CurChangeEvent">
                          <vxe-table-column type="selection" width="40" align="center"></vxe-table-column>
                          <vxe-table-column field="inlib_dt" title="入库日期" width="80" align="center" sortable :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column>
                          <vxe-table-column field="barcode" title="条码号" width="90" sortable></vxe-table-column>
                          <vxe-table-column field="workid" title="库位号/工作编号" width="100" sortable></vxe-table-column>
                          <vxe-table-column field="pat_name" title="姓名" width="60" align="center" sortable></vxe-table-column>
                          <vxe-table-column field="pat_sexname" title="性别" width="40" align="center" sortable></vxe-table-column>
                          <vxe-table-column field="pat_agestr" title="年龄" width="60" sortable></vxe-table-column>
                          <vxe-table-column field="pat_no" title="病历号" width="80" sortable></vxe-table-column>
                          <vxe-table-column field="sample_items" title="申请项目（简称，部分）" width="150" sortable></vxe-table-column>
                          <vxe-table-column field="req_groupna" title="分单类别" width="100" sortable></vxe-table-column>
                          <vxe-table-column field="specimen_name" title="标本类型" width="100" sortable></vxe-table-column>
                          <vxe-table-column field="emer_flagname" title="加急" width="50" sortable></vxe-table-column>
                          <vxe-table-column field="libstatusname" title="库位状态" width="60" align="center"></vxe-table-column>
                          <!-- <vxe-table-column field="workstatusname" title="报告状态" width="80"></vxe-table-column> -->
                          <vxe-table-column field="hospitalname" title="送检医院" width="120" sortable></vxe-table-column>
                          <vxe-table-column field="labgroupname" title="检验组" width="80" sortable></vxe-table-column>
                          <vxe-table-column field="sampledate" title="最后上机时间" width="80" sortable></vxe-table-column>
                          <vxe-table-column field="rptunitname" title="最后上机报告单元" width="100" align="center"></vxe-table-column>
                          <vxe-table-column field="sampleno" title="最后上机标本号" width="100" align="center"></vxe-table-column>
                          <vxe-table-column field="req_wardnoname" title="申请科室" width="80" align="center"></vxe-table-column>
                          <vxe-table-column field="req_bedno" title="床号" width="70" align="center"></vxe-table-column>
                          <vxe-table-column field="pat_typecodename" title="病人来源" width="60"></vxe-table-column>
                          <vxe-table-column field="req_docnoname" title="申请医生" width="60" align="center"></vxe-table-column>
                          <vxe-table-column field="req_dt" title="申请时间" width="120" align="center"></vxe-table-column>
                          <vxe-table-column field="inlib_username" title="入库人" width="60" align="center"></vxe-table-column>
                          <vxe-table-column field="req_stat" title="状态" width="80" align="center"></vxe-table-column>
                          <vxe-table-column field="itemid" title="入库时间" width="120" align="center"></vxe-table-column>
                          <vxe-table-column field="create_dt" title="创建时间" width="120" align="center"></vxe-table-column>
                          <vxe-table-column field="create_username" title="创建人" width="60" align="center"></vxe-table-column>
                          <vxe-table-column field="pat_diag" title="临床诊断" width="100"></vxe-table-column>
                          <vxe-table-column field="reject_reason" title="剔回原因" width="80"></vxe-table-column>
                          <vxe-table-column field="recieve_dt" title="接收时间" width="120" sortable></vxe-table-column>
                          <vxe-table-column field="recieve_username" title="接收人" width="60" sortable align="center"></vxe-table-column>
                          <vxe-table-column field="charge_flag" title="计价标志" width="70" align="center"></vxe-table-column>
                          <vxe-table-column field="pat_birth" title="生日" width="80" align="center" :formatter="['toDateString', 'yyyy-MM-dd']"></vxe-table-column>
                          <vxe-table-column field="perform_deptname" title="执行科室" width="80" align="center"></vxe-table-column>
                          <vxe-table-column field="req_wardnoname" title="病区代码" width="70" align="center"></vxe-table-column>
                          <vxe-table-column field="reject_count" title="剔回次数" width="60"></vxe-table-column>
                          <vxe-table-column field="specimen_code" title="标本类型代码" width="90"></vxe-table-column>
                          <vxe-table-column field="req_groupid" title="分单类别ID" width="90" align="center"></vxe-table-column>
                          <vxe-table-column field="recieve1_dt" title="工作组签收时间" width="120"></vxe-table-column>
                          <vxe-table-column field="recieve1_username" title="工作组签收人" width="80" align="center"></vxe-table-column>
                          <vxe-table-column field="inlib_statusname" title="入库状态" width="70" align="center"></vxe-table-column>
                          <vxe-table-column field="library_id" title="所在库位ID" width="70" align="center"></vxe-table-column>
                          <vxe-table-column field="reqtypename" title="申请单类别" width="80" align="center"></vxe-table-column>
                          <vxe-table-column field="tube_color" title="试管颜色" width="80"></vxe-table-column>
                          <vxe-table-column field="idhead" title="号段" width="60"></vxe-table-column>
                          <vxe-table-column field="idnumber" title="序号" width="60"></vxe-table-column>
                      </vxe-table>
                  </div>
              </rm-layout-right>
          </div>
      </div>
      <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择申请项目" :visible.sync="dialogreqitem">
          <rm-pop-common ref="reqitem" @change="reqitemChange" @cancel="dialogreqitem = false" :multiple="true" datatype="reqitem"></rm-pop-common>
      </el-dialog>
  </div>
</template>

<script>
import XEUtils from "xe-utils"; //引入工具类
export default {
  name: "LIS352",
  data() {
      return {
          searchObj: {
              startdt: this.$pub.InitDateTime2(7).datefrom,
              enddt: this.$pub.InitDateTime2(7).dateto,
              labgroupid: "",
              barcode: "",
              reqitemcodes: "",
              repitemgroup: "",
              sampleno1: "",
              sampleno2: "",
              libno1: "",
              libno2: "",
              patname: "",
              libheader: "",
              patno: "",
              status: 1,
              defaultlabgroupid:"",
          },
          rptstatusOption: [
              { label: "未完成报告", value: "0" },
              { label: "已完成报告", value: "1" },
          ],
          libnoheadsOption: [],
          LeftList: [],
          LeftLoading: false,
          RightList: [],
          RightLoading: false,
          keyLocalConfig: {
              isArrow: true,
          },
          dialogreqitem: false,
          selectConfig: { tigger: "row", checkAll: true },
          userno: this.$tool.getSession(this.$tool.loginuserno),
          labgroupname: "",
          repitemgroupname: "",
          reqitemnames: "",
      };
  },
  created() {
      this.InitOption();
  },
  methods: {
      InitOption() {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS352",
                  method: "post",
                  data: {
                      action: "InitOption",
                  },
              })
              .then((res) => {
                  this.searchObj.labgroupid = res.labgroupid;
                  this.defaultlabgroupid = res.labgroupid;
                  this.labgroupname = res.labgroupname;
                  this.getlibhead(res.labgroupid);
              });
      },
      InitPage() {
          this.LeftLoading = true;
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS352",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "InitPage",
                      ...this.searchObj,
                  },
              })
              .then((res) => {
                  console.log(res);
                  this.LeftLoading = false;
                  this.LeftList = res.data;
                  if (res.data.length > 0) {
                      this.selectRow = res.data[0];
                      this.$refs.lxTable.setCurrentRow(res.data[0]);
                      this.queryRight(res.data[0].barcode);
                  } else {
                      this.selectRow = "";
                      this.queryRight("");
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
                  this.LeftLoading = false;
              });
      },
      RptItemRowName({ row, rowIndex }) {
          if (!row.sampleno) {
              return "rm_cell_yellow";
          }
      },
      queryRight(barcode) {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS352",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "queryRight",
                      barcode: barcode,
                  },
              })
              .then((res) => {
                  this.RightLoading = false;
                  this.RightList = res.data;
              })
              .catch((e) => {
                  this.$alert(e, "出错");
                  this.LeftLoading = false;
              });
      },
      CurChangeEvent({ row, column }) {
          this.queryRight(row.barcode);
      },
      btnAbandon() {
          let data = this.$refs.lxTable.getSelectRecords();
          if (data.length > 0) {
              let barcodes = "";
              let sumcnt = data.length;
              let unfinishcnt = 0;
              data.forEach((item) => {
                  if (item.workstatus == "1") unfinishcnt++;
                  if (barcodes == "") barcodes = item.barcode;
                  else barcodes += "," + item.barcode;
              });
              this.$confirm(`是否要对选择的` + sumcnt + "个标本遗弃，其中有" + unfinishcnt + "个标本未完成实验？", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
              })
                  .then(() => {
                      this.abandon(barcodes);
                  })
                  .catch((e) => {});
          } else {
              this.$alert("请勾选想要遗弃的标本！", "提示");
          }
      },
      abandon(barcodes) {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS352",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "abandon",
                      barcodes: barcodes,
                  },
              })
              .then((res) => {
                  if (res.errcode == "1") {
                      this.$pub.message(this, res.errmsg, "success");
                      this.InitPage();
                  } else {
                      this.$alert(res.errmsg, "提示");
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },
      reqitemChange(data) {
          let reqitemcodes = "";
          let reqitemnames = "";
          data.forEach((item) => {
              if (reqitemcodes == "") 
              {
                  reqitemcodes = item.hidkey;
                  reqitemnames = item.hidname;
              }
              else {
                  reqitemcodes += "," + item.hidkey;
                  reqitemnames +="," + item.hidname;
              }
          });
          this.searchObj.reqitemcodes = reqitemcodes;
          this.reqitemnames = reqitemnames;
          this.dialogreqitem = false;
      },
      btnCancelInLib() {
          let data = this.$refs.lxTable.getSelectRecords();
          if (data.length > 0) {
              let barcodes = "";
              data.forEach((item) => {
                  if (barcodes == "") barcodes = item.barcode;
                  else barcodes += "," + item.barcode;
              });
              this.$confirm("是否要撤销当前标本的入库状态？", "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
              })
                  .then(() => {
                      this.CancelInLib(barcodes);
                  })
                  .catch((e) => {});
          } else {
              this.$alert("请勾选想要遗弃的标本！", "提示");
          }
      },
      CancelInLib(barcodes) {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS352",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "CancelInLib",
                      barcodes: barcodes,
                  },
              })
              .then((res) => {
                  if (res.errcode == "1") {
                      this.$pub.message(this, res.errmsg, "success");
                      this.InitPage();
                  } else {
                      this.$alert(res.errmsg, "提示");
                  }
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },
      exportExcel() {
          let tableColumn = this.$refs.lxTable.getColumns();
          let extableColumn = [];
          tableColumn.forEach((item) => {
              extableColumn.push({ title: item.title, field: item.property });
          });
          let filtertxt = this.getExportFilter();
          this.$pub.exportTableExcel(this.LeftList, extableColumn, "LIS352 标本编号状态查询.xlsx", filtertxt);
      },
      // 获取当前导出文件的所有查询条件
      getExportFilter() {
          let filtertxt = "入库日期:" + XEUtils.toDateString(this.searchObj.startdt, "yyyy-MM-dd HH:mm:ss") + "至" + XEUtils.toDateString(this.searchObj.enddt, "yyyy-MM-dd HH:mm:ss") + "; ";
          if(this.searchObj.sampleno1 || this.searchObj.sampleno2) filtertxt += "样本号:" + this.searchObj.sampleno1 +"至" + this.searchObj.sampleno2+ "; ";
          if(this.searchObj.labgroupid) filtertxt += "检验组:" + this.labgroupname + "; ";
          if(this.searchObj.rptstatus) filtertxt += "报告状态:" + this.getOptionName(this.rptstatusOption.filter((item) =>  this.searchObj.rptstatus ==item.value)) + "; ";
          if(this.searchObj.barcode) filtertxt += "条形码:" + this.searchObj.barcode + "; ";
          if(this.searchObj.libheader) filtertxt += "库位类型:" + this.getOptionName(this.libnoheadsOption.filter((item) =>  this.searchObj.libheader ==item.value)) + "; ";
          if(this.searchObj.libno1 || this.searchObj.libno2) filtertxt += "库位号:" + this.searchObj.libno1 + "至" + this.searchObj.libno2+ "; ";
          if(this.searchObj.patname) filtertxt += "姓名:" + this.searchObj.patname + "; ";
          if(this.searchObj.reqitemcodes) filtertxt += "申请项目:" + this.reqitemnames + "; ";
          if(this.searchObj.repitemgroup) filtertxt += "项目组合:" + this.repitemgroupname + "; ";
          if(this.searchObj.patno) filtertxt += "病历号:" + this.searchObj.patno + "; ";
          if(this.searchObj.status) filtertxt += "标本编号状态:" + (this.searchObj.status == 1 ? "在库": this.searchObj.status == 9 ? "遗弃":"全部") + "; ";
          return filtertxt;
      },
      getOptionName(option) {
          if (option && option.length > 0) {
              let optionname = "";
              option.forEach((item) => {
                  if(item.hasOwnProperty("display")) {
                      optionname += item.display + ",";
                  } else {
                      optionname += item.label + ",";
                  }
              });
              return optionname.substring(0, optionname.length - 1);
          } else {
              return "";
          }
      },
      itemclassChange(code, name) {
          this.searchObj.ddlitemclass = code;
          this.InitPage();
      },
      itemidChange(code, name) {
          this.searchObj.itemid = code;
          this.InitPage();
      },
      vendoridChange(code, name) {
          this.searchObj.vendorid = code;
          this.InitPage();
      },
      labgroupidChange(code, name) {
          console.log(code, name);
          this.searchObj.labgroupid = code;
          this.labgroupname = name;
          this.getlibhead(code);
          this.InitPage();
      },
      warehouseidChange(code, name) {
          this.searchObj.warehouseid = code;
          this.InitPage();
      },
      itemgroupidChange(code, name) {
          this.searchObj.itemgroupid = code;
          this.InitPage();
      },
      repitemgroupChange(code, name) {
          this.searchObj.repitemgroup = code;
          this.repitemgroupname = name;
      },
      btnClear() {
          this.searchObj = {
              startdt: this.$pub.InitDateTime2(7).datefrom,
              enddt: this.$pub.InitDateTime2(7).dateto,
              labgroupid: this.defaultlabgroupid,
              barcode: "",
              reqitemcodes: "",
              repitemgroup: "",
              sampleno1: "",
              sampleno2: "",
              libno1: "",
              libno2: "",
              patname: "",
              libheader: "",
              patno: "",
              status: 1,
          };
          this.LeftList = [];
          this.RightList = [];
      },
      getlibhead(labgroupid) {
          this.$tool
              .request({
                  url: "LIS/LIS3/LIS352",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "initData",
                      labgroupid: labgroupid,
                  },
              })
              .then((res) => {
                  this.libnoheadsOption = res.mydata;
              })
              .catch((e) => {
                  this.$alert(e, "出错");
              });
      },

      //打印
      printBtn(index) {
          var that = this;
          let row = that.$refs.lxTable.getCurrentRow();
          if (!row) return false;
          if (typeof jsObj != "undefined") {
              let data = this.$refs.lxTable.afterFullData;
              let column = this.$refs.lxTable.getTableColumn().tableColumn;
              let columns = this.$pub.InitColumn(column);
              let str = JSON.stringify(columns);
              str += "\r";
              str += JSON.stringify(data);
              let sql = btoa(encodeURIComponent(str));
              if (data.length > 0) {
                  if (index == "2") {
                      //设计
                      const rload = this.$pub.openLoading(this, "正在打开报表设计器，请稍候……");
                      jsObj.SetCustomJsonPrintConfig("5083", sql, this.userno, "耗材入库清单样式");
                      rload.close();
                  } else {
                      //打印
                      if (row.status == 80) {
                          jsObj.PrintCustomJsonReport("5083", sql, this.userno, "耗材入库清单样式", "");
                      }
                  }
              } else {
                  this.$alert("没有获取到数据！", "提示");
              }
          } else {
              this.$alert("请使用" + this.$pub.clientname + "打开！", "提示");
          }
      },
  },
};
</script>

<style scoped>
.page-top {
  width: 100%;
  height: 135px;
  border: 1px solid #ccc;
  position: absolute;
  font-size: 12px;
  padding: 5px 0;
  line-height: 24px;
  overflow-x: auto;
  overflow-x: overlay;
}
::-webkit-scrollbar {
  width: 0px;
  height: 5px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

.top-deal {
  text-align: right;
  margin-right: 5px;
}
.pagecenter {
  position: absolute;
  top: 140px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
/deep/ .vxe-table .vxe-body--column.col-blue {
  color: blue;
}
.mytable-style {
  height: 100%;
}
/deep/ .mytable-style .vxe-table--body-wrapper {
  height: calc(100% - 54px) !important;
}
/deep/.el-checkbox__inner::after {
  border: 2px solid #000000 !important;
  box-sizing: content-box;
  content: "";
  border-left: 0 !important;
  border-top: 0 !important;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
</style>